/* eslint-disable @typescript-eslint/ban-types */
<template>
    <div class="container">
        <div class="header block">
            <div class="search">
                <div class="detail" v-if="detailType !== '2'">
                    <div class="title">派遣单位名称：{{ enterpriseName }}</div>
                    <div class="title title-left-active" v-if="detailType !== '1'">项目名称：{{ projectName }}</div>
                </div>
                <div class="detail" v-else>
                    <div class="title">姓名：{{ enterpriseName }}</div>
                    <div class="title title-left-active">身份证：{{ projectName }}</div>
                </div>
                <div>
                    <span class="detail-key">创建时间：</span>
                    <span class="detail-value">{{ timeStart }}</span>
                    <span class="detail-key">结束时间：</span>
                    <span class="detail-value">{{ timeEnd }}</span>
                </div>
            </div>
            <div class="header-r">
                <div :class="['header-r-all point',queryType === 1 ? 'header-r-active' : '' ] " @click="onQueryType(1)">
                    全部
                </div>
                <div :class="['header-r-only point', queryType !== 1 ? 'header-r-active' : '' ]" @click="onQueryType(0)">
                    仅打卡
                </div>
            </div>
        </div>
        <div class="block">
            <div class="row">
                <div class="search" >
                    <!-- 请输入人员/派遣单位名称 -->
                    <input
                        type="text"
                        placeholder="请输入姓名/身份证号"
                        class="input search-input"
                        v-model="searchText"
                        style="width:176px"
                    />
                    <button class="btn" @click="getSignDetailInfo">搜索</button>
                    <button class="btn-white" @click="onReset">重置</button>
                </div>
                <div>
<!--                    <button class="btn block-btn-right btn-alone"  @click="onExportVertical()">-->
<!--                        <i class="el-icon el-icon-upload2" />导出竖版表格-->
<!--                    </button>-->
                    <export-button @export="onExportVertical()">导出竖版表格</export-button>
<!--                    <button class="btn block-btn-right" @click="onExport()">-->
<!--                        <i class="el-icon el-icon-upload2" />导出表格-->
<!--                    </button>-->
                  <export-button @export="onExport()">导出表格</export-button>
                </div>
            </div>
            <el-scrollbar always native>
                <div
                    class="table"

                    :style="{
                        width:
                            Object.keys(tabHeadInfo).length > 6
                                ? Object.keys(tabHeadInfo).length * 170 + 'px'
                                : '100%'
                    }"
                >
                    <el-table
                        :data="tableData"
                        :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }"
                        fit:true
                    >
                        <el-table-column
                            prop="inex"
                            :label="item"
                            v-for="(item, index) in tabHeadInfo"
                            v-bind:key="index"
                            :width="index === 0 || index === 3|| index === 4|| index === 5|| index === 6|| index === 7|| index === 8? '100px' : ''"
                        >
                            <template v-slot="scope">
                                <div>
                                    {{
                                        tableData[scope.$index][index + 2].indexOf('true') != -1
                                            ? tableData[scope.$index][
                                                  index + 2
                                              ].split('true')[0]
                                            : (tableData[scope.$index][index + 2] === 'null' ? '暂无' : tableData[scope.$index][index + 2])
                                    }}
                                    <!--  -->
                                    <div
                                        class="point link"
                                        @click="
                                            preview(
                                                scope.row[0],
                                                scope.row[1],
                                                tabHeadInfo[index]
                                            )
                                        "
                                        v-if="
                                            index + 3 > 7 &&
                                                tableData[scope.$index][
                                                    index + 2
                                                ] !== '无' &&
                                                tableData[scope.$index][
                                                    index + 2
                                                ].indexOf('true') != -1
                                        "
                                    >
                                        {{
                                            index + 3 > 7 &&
                                            tableData[scope.$index][
                                                index + 2
                                            ] !== '无' &&
                                            tableData[scope.$index][
                                                index + 2
                                            ].indexOf('true') != -1
                                                ? '点击查看图片'
                                                : ''
                                        }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-scrollbar>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
    {{ previewIndex }}
    <el-image-viewer
        hide-on-click-modal
        @close="closeImgViewer"
        :url-list="imageList"
        v-if="showImageViewer"
        :initial-index="previewIndex"
        :infinite="infinite"
    />
</template>
<script lang="ts" setup></script>
<script lang="ts">
import { defineComponent } from 'vue'
import { exportSign, exportSignVertical } from '@/api/export'
import { getSignDetailInfo, getSignImgList } from '@/api/sign'
// import { number } from 'echarts'
// interface objEntDto {
//     [key: string]: string
// }
export default defineComponent({
    name: 'SignDetail',
    data () {
        return {
            infinite: false,
            tableData: [] as string[],
            tabHeadInfo: [] as string[],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            searchText: '',
            searchValue: '',
            selects: [] as string[],
            id: '',
            detailType: '',
            timeEnd: '',
            timeStart: '',
            enterpriseName: '',
            showImageViewer: false,
            imageList: [] as string[],
            previewIndex: 0 as number,
            projectName: '',
            queryType: 1
        }
    },
    created () {
        const { id, type, start, end, title, name } = this.$route.params as {
            [key: string]: string
        }
        this.id = id
        this.detailType = type
        this.timeEnd = end
        this.timeStart = start
        this.enterpriseName = title
        this.projectName = name
        this.getSignDetailInfo()
    },
    methods: {
        onQueryType (event:number) {
            console.log(event, 'event')
            this.queryType = event
            this.getSignDetailInfo()
        },
        async getSignDetailInfo () {
            const result = await getSignDetailInfo({
                beginCreateTime: this.timeStart,
                endCreateTime: this.timeEnd,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                projectId: this.detailType === '0' ? this.id : '',
                serveCompanyId: this.detailType === '1' ? this.id : '',
                userId: this.detailType === '2' ? this.id : '',
                searchText: this.searchText,
                queryType: this.queryType
            })
            this.total = result.totalCount
            this.tabHeadInfo = result.excelHeadInfo
            // console.log(this.tabHeadInfo, 'tabHeadInfo')
            // const arr = [] as Array<objEntDto>
            // const brr: objEntDto = {}
            // console.log(result.list, 'result.list')
            // result.list.forEach(item => {
            //     console.log(item, 'item')
            //     Object.keys(item).forEach(key => {
            //         brr[key] = ((item) as unknown as { [key: string]: string })[
            //             key
            //         ]
            //     })
            //     arr.push({
            //         ...brr
            //     })
            // })
            this.tableData = result.list
            console.log(this.tabHeadInfo, 'tabHeadInfo')
            console.log(this.tableData, 'tableData')
        },
        handleSizeChange () {
            this.pageNum = 1
            this.getSignDetailInfo()
        },
        handleCurrentChange () {
            this.getSignDetailInfo()
        },
        async onExportVertical () {
            const result = await exportSignVertical({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                beginCreateTime: this.timeStart,
                endCreateTime: this.timeEnd,
                projectId: this.detailType === '0' ? this.id : '',
                serveCompanyId: this.detailType === '1' ? this.id : '',
                userId: this.detailType === '2' ? this.id : '',
                searchText: this.searchText,
                queryType: this.queryType
            })
            window.location.href =
                process.env.VUE_APP_BASE_URL +
                    '/common/download?delete=true&fileName=' +
                    JSON.parse(JSON.stringify(result)).data

            this.$message.success('导出成功！')
        },
        async onExport () {
            const result = await exportSign({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                beginCreateTime: this.timeStart,
                endCreateTime: this.timeEnd,
                projectId: this.detailType === '0' ? this.id : '',
                serveCompanyId: this.detailType === '1' ? this.id : '',
                userId: this.detailType === '2' ? this.id : '',
                searchText: this.searchText,
                queryType: this.queryType
            })
            window.location.href =
                process.env.VUE_APP_BASE_URL +
                    '/common/download?delete=true&fileName=' +
                    JSON.parse(JSON.stringify(result)).data

            this.$message.success('导出成功！')
        },
        // 点击查看图片
        async preview (userId: string, projectId: string, date: string) {
            console.log(userId, projectId, date)
            const result = await getSignImgList({
                beginCreateTime: this.timeStart,
                endCreateTime: this.timeEnd,
                userId: Number(userId),
                projectId: Number(projectId)
            })
            // this.imageList.push()
            this.imageList = []
            let str = 0
            let previewIndex = 0
            result.forEach((item, index) => {
                // if (JSON.parse(JSON.stringify(item)).date === date) {
                //     previewIndex = index
                // }
                if (JSON.parse(JSON.stringify(item)).signInVoucher) {
                    this.imageList.push(
                        JSON.parse(JSON.stringify(item)).signInVoucher
                    )
                } else {
                    str += 1
                }
                if (JSON.parse(JSON.stringify(item)).signOutVoucher) {
                    this.imageList.push(
                        JSON.parse(JSON.stringify(item)).signOutVoucher
                    )
                } else {
                    str += 1
                }
            })

            const index = result.findIndex(item => JSON.parse(JSON.stringify(item)).date === date)
            const cur = (result[index] as any).signInVoucher || (result[index] as any).signOutVoucher
            const curIndex = this.imageList.findIndex(i => i === cur)
            if (curIndex!==-1) {
                this.previewIndex = curIndex
            }
            if (this.previewIndex === 0) {
                // this.previewIndex = 0
                this.showImageViewer = true
                return
            }
            console.log(str, 'strstr')
            console.log(previewIndex, 'previewIndex')
            // this.previewIndex =
            // previewIndex * 2 - str <= 0 ? previewIndex : (previewIndex) * 2 - str
            // console.log(this.previewIndex, 'this.previewIndex')
            //
            // console.log(this.previewIndex, 'previewIndex')
            this.showImageViewer = true
        },
        closeImgViewer () {
            this.showImageViewer = false
        },
        onReset () {
            this.searchText = ''
            this.pageNum = 1
            this.getSignDetailInfo()
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.block
    padding 20px 24px 0
.header
    display flex
    justify-content space-between
    align-items flex-start
    padding-bottom 20px
.el-scrollbar
    margin-top 60px
.table
    margin-top 0
.title
    font-size font-small
    margin-bottom 24px
.detail-value
    margin-right 60px
.block-btn-right
    float right
    margin-bottom 10px
/deep/.el-table--scrollable-x .el-table__body-wrapper {
   overflow-x clip
}
.el-table td.el-table__cell div
    white-space pre-wrap
.title-left-active
    margin-left 44px
.btn-alone{
    width 125px
    margin-left 10px
}
.table-column-alone
    width 100px
.header-r
    display flex
    align-items center

    .header-r-all
        width 71px
        height 40px
        border: 1px solid #E8E9EA;
        border-radius 4px 0 0 4px
        text-align center
        line-height 40px
    .header-r-only
        width 71px
        height 40px
        border: 1px solid #E8E9EA;
        border-radius 0 4px 4px 0
        text-align center
        line-height 40px
    .header-r-active
        border: 1px solid #1989FA;
        color #1989FA
</style>

function data(data: any) { throw new Error('Function not implemented.') }
function data(data: any) { throw new Error('Function not implemented.') }
